<template>
  <div class="__header" :style="`background: ${bc};`">
    <NavBar
      left-arrow
      :title="title"
      :rightText="rightText || ''"
      @click-left="goBack"
      @click-right="rightFn"
      :z-index="zIndex"
      :fixed="fixed"
      :border="false"
    >
      <slot name="right" slot="right"></slot>
    </NavBar>
    <div class="header-plac" v-show="fixed" v-if="hasPlac"></div>
  </div>
</template>
<script>
import { NavBar } from 'vant';
export default {
  props: {
    clickLeft: {
      default: null,
      type: Function
    },
    fixed: {
      default: true,
      type: Boolean
    },
    title: {
      type: String
    },
    zIndex: {
      default: 100,
      type: Number,
    },
    rightText: {
      default: '',
      type: String
    },
    rightFn: {
      default: () => {},
      type: Function
    },
    hasPlac: {
      default: true,
      type: Boolean
    },
    bc: {
      default: '#fff',
      type: String
    }
  },
  components: {
    NavBar
  },
  methods: {
    back() {
      this.$route.meta.notKeepAlive = true;
      this.$router.go(-1);
    },
    goBack() {
      if (this.clickLeft) {
        this.clickLeft();
      } else {
        this.back();
      }
    }
  }
}
</script>
<style lang="less">
.__header{
  .header-plac{
    height: 46PX;
  }
}
</style>
